<template>
  <div class="about">
    <main-nav-bar />
    <div class="conainter d-flex flex-column justify-content-center align-item-center">
      <!-- banner图 -->
      <div class="row banner">
        <div class="title">
          <h1 class="hvr-bounce-out">Contact</h1>
          <p>Welcome to leave a message</p>
        </div>
      </div>
      <!-- 卡片地址电话 -->
      <div class="row clearfix myrow">
        <div class="col-lg-4 col-md-6 col-sm-12 info-column" @click="mapShoew">
          <div
            class="single-info-box wow fadeInUp animated animated animated"
            data-wow-delay="00ms"
            data-wow-duration="1500ms"
            style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInUp;"
          >
            <div class="inner-box card">
              <div class="icon-box">
                <i class="bi bi-geo-alt"></i>
              </div>
              <h3 class="hvr-pulse-grow">地址</h3>
              <p style="cursor: pointer;">福州理工学院</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 info-column">
          <div
            class="single-info-box wow fadeInUp animated animated animated"
            data-wow-delay="300ms"
            data-wow-duration="1500ms"
            style="visibility: visible; animation-duration: 1500ms; animation-delay: 300ms; animation-name: fadeInUp;"
          >
            <div class="inner-box card">
              <div class="icon-box">
                <i class="bi bi-telephone"></i>
              </div>
              <h3 class="hvr-pulse-grow">手机</h3>
              <p>
                <a href="#">+17709674237</a>
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 info-column">
          <div
            class="single-info-box wow fadeInUp animated animated animated"
            data-wow-delay="600ms"
            data-wow-duration="1500ms"
            style="visibility: visible; animation-duration: 1500ms; animation-delay: 600ms; animation-name: fadeInUp;"
          >
            <div class="inner-box card">
              <div class="icon-box">
                <i class="bi bi-envelope"></i>
              </div>
              <h3 class="hvr-pulse-grow">QQ</h3>
              <p>
                <a href="mailto:info@example.com">932513128</a>
              </p>
            </div>
          </div>
        </div>
        <div class="anim-icon">
          <div
            class="icon anim-icon-1"
            style="background-image: url(http://view.jqueryfuns.com/2021/3/22/3951321da0c5b6ec0d65097571563176/assets/images/shape/shape-3.png);"
          ></div>
          <div
            class="icon anim-icon-2"
            style="background-image: url(http://view.jqueryfuns.com/2021/3/22/3951321da0c5b6ec0d65097571563176/assets/images/shape/shape-3.png);"
          ></div>
        </div>
      </div>
      <!-- 地图 -->
      <div class="row myrow" v-if="mapdiplay">
        <h2>
          <location-postion />
        </h2>
        <div class="card myrow">
          <bai-du-map />
        </div>
      </div>
      <!-- 留言板 -->
      <div class="row myrow">
        <div class="card message">
          <h1 class="hvr-pulse-grow">联系我们</h1>

          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item prop="desc" class="my-5">
              <el-input
                type="textarea"
                rows="5"
                cols="20"
                placeholder="相识即是缘分,请留下您宝贵的建议！"
                v-model="ruleForm.desc"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 留言展示 -->
      <div
        class="row myrow row-cols-1 row-cols-md-2 row-cols-lg-3 d-flex justify-content-center align-items-center"
      >
        <div class="card messageListCard mb-3 mx-3 my-3" v-for="item in messageList" :key="item.id">
          <div class="row">
            <div
              class="col-md-4 d-flex flex-column justify-content-center align-items-center"
              style="border-right: 1px dotted #ccc;"
            >
              <div v-if="item.name == 'admin'" class="log1">
                <img :src="item.headPortrait" alt="头像" style=" border-radius:50%;" />
              </div>

              <div v-else class="log3">
                <img :src="item.headPortrait" alt="头像" style=" border-radius:50%;" />
              </div>

              <h4 class="mt-3">{{ item.name }}</h4>
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <p class="card-title">{{ item.message }}</p>

                <div class="card-text text-muted">
                  <i
                    v-if="item.countStatus"
                    class="bi bi-hand-thumbs-up-fill mx-2"
                    @click="count(item)"
                  ></i>
                  <i v-else class="bi bi-hand-thumbs-up mx-2" @click="count(item)"></i>
                  {{ item.count }}
                  <i
                    v-if="item.starStatus"
                    class="bi bi-star-fill mx-2"
                    @click="star(item)"
                  ></i>
                  <i v-else class="bi bi-star mx-2" @click="star(item)"></i>
                  {{ item.star }}
                </div>
                <p class="card-text">
                  <small class="text-muted">发表日期： {{ item.time | formatDate }}</small>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 留言分页pc -->
    <div v-show="showPagination" class="row d-none d-lg-block">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          background
          :page-sizes="[4, 6, 8, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 移动端 -->
    <div v-show="showPagination" class="row d-block d-lg-none">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          background
          :page-sizes="[4, 6, 8, 10]"
          :page-size="pageSize"
          layout="total,prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <footer style="height:10vh;"></footer>
  </div>
</template>

<script>
import Titles from '@/components/Titles.vue'
import MainNavBar from '@/common/NavBar/MainNavBar.vue'
import BaiDuMap from '@/common/BaiDuMap.vue'
import LocationPostion from '@/common/LocationPostion.vue'
import formatDateTimes from '@/assets/Tools/date2.js'
import qs from 'qs'

export default {
  name: 'about',
  components: {
    Titles,
    MainNavBar,
    BaiDuMap,
    LocationPostion,
  },
  data() {
    return {
      messageList: [],
      mesgTime: '', //发表时间
      mapdiplay: false,
      showPagination: false,
      // 分页
      total: 0,
      pageSize: 6,
      currentPage: 1,
      ruleForm: {
        uid: '',
        name: '',
        email: '',
        phone: '',
        desc: '',
        headPortrait: '',
      },
      rules: {
        name: [
          { required: true, message: '姓名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: 'blur',
          },
        ],
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          {
            min: 11,
            max: 11,
            message: '请输入正确的电话号码',
            trigger: 'blur',
          },
        ],
        desc: [{ required: true, message: '请填写留言', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.getMessages()
    // 登录状态判断
    if (this.$store.getters.getUserInfo) {
      this.ruleForm.uid = this.$store.getters.getUserInfo.id
    }
  },
  filters: {
    // 发表时间格式化
    formatDate(val) {
      return formatDateTimes.formatDateTime(val)
    },
  },
  methods: {
    //提交留言
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const data = await this.$http.post('/leavingMessage/submitMessage', {
            userId: this.$store.getters.getUserInfo.id,

            message: this.ruleForm.desc,
          })

          if (data.code == 200) {
            this.subMessaageTrue()
            this.getMessages()
            this.$refs[formName].resetFields()
          } else {
            this.subMessaageFalse()
          }
        }
      })
    },
    // 清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    //获取留言
    async getMessages() {
      if (this.$store.getters.getUserInfo) {
        const data = await this.$http.post(
          '/leavingMessage/message?' +
            qs.stringify({
              postId: this.$store.getters.getUserInfo.id,
              pageNum: this.currentPage,
              pageSize: this.pageSize,
            })
        )
        if (data.code == 200) {
          this.messageList = data.data.records
          this.total = data.data.total
          this.showPagination = true
        }
        console.log(this.messageList)
      } else {
        const data = await this.$http.post(
          '/leavingMessage/message?' +
            qs.stringify({
              pageNum: this.currentPage,
              pageSize: this.pageSize,
            })
        )
        if (data.code == 200) {
          this.messageList = data.data.records
          this.total = data.data.total
          this.showPagination = true
        }
      }
    },

    // 点赞
    async count(item) {
      // 登录状态判断
      if (this.$store.getters.getUserInfo) {
        //获取当前状态
        const likeInfo = await this.$http.post('/leavingMessage/getCountById', {
          postId: this.$store.getters.getUserInfo.id,
          msgId: item.id,
          userId: item.userId,
        })

        //将新状态传入
        const data = await this.$http.post('/leavingMessage/count', {
          postId: likeInfo.data.postId,
          msgId: likeInfo.data.msgId,
          userId: likeInfo.data.userId,
          status: !likeInfo.data.status, //取反
        })

        if (data.code == 200) {
          //这里改变数据的操作，用于立即响应客户，客户没必要刷新也能看到效果，和真实的数据其实并没有任何关系
          if (!likeInfo.data.status) {
            //和传参一样，需要取反
            console.log('点赞成功！')
            item.countStatus = true
            item.count++
          } else {
            console.log('取消点赞成功！')
            item.countStatus = false
            item.count--
          }
        }
      } else {
        this.openCount()
      }
    },
    // 收藏
    async star(item) {
      // 用户登录
      if (this.$store.getters.getUserInfo) {
        //获取当前状态
        const starInfo = await this.$http.post('/leavingMessage/getStarById', {
          postId: this.$store.getters.getUserInfo.id,
          msgId: item.id,
          userId: item.userId,
        })

        //将新状态传入
        const data = await this.$http.post('/leavingMessage/star', {
          postId: starInfo.data.postId,
          msgId: starInfo.data.msgId,
          userId: starInfo.data.userId,
          status: !starInfo.data.status, //取反
        })

        if (data.code == 200) {
          //这里改变数据的操作，用于立即响应客户，客户没必要刷新也能看到效果，和真实的数据其实并没有任何关系
          if (!starInfo.data.status) {
            //和传参一样，需要取反
            console.log('收藏成功！')

            item.starStatus = true
            item.star++
          } else {
            console.log('取消收藏成功！')

            item.starStatus = false
            item.star--
          }
        }
      } else {
        this.openStar()
      }
    },
    // 未登录点赞提醒
    openCount() {
      this.$notify.error({
        title: '点赞失败',
        message: '点赞前！请先登录哟',
        offset: 100,
        duration: 2500,
      })
    },

    // 未登录收藏提醒
    openStar() {
      this.$notify.error({
        title: '收藏失败',
        message: '收藏前！请先登录哟',
        offset: 100,
        duration: 2500,
      })
    },
    subMessaageFalse() {
      this.$notify.error({
        title: '留言失败',
        message: '留言前！请先登录哟',
        offset: 100,
        duration: 2500,
      })
    },
    subMessaageTrue() {
      this.$notify.success({
        title: '留言成功',
        message: '可以查看一下自己的留言呦',
        offset: 100,
        duration: 2500,
      })
    },

    //地图显示
    mapShoew() {
      this.mapdiplay = !this.mapdiplay
    },
    //留言分页
    // 当前页数
    handleSizeChange(pageSize) {
      this.currentPage = 1
      this.pageSize = pageSize
      this.getMessages()
    },
    // 跳转页数
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getMessages()
    },
  },
}
</script>

<style lang="less" scoped>
.about {
  margin-top: 100px;
  a {
    text-decoration: none !important;
  }
}

.banner {
  position: relative;
  height: 50vh;
  background: url(http://view.jqueryfuns.com/2021/3/22/3951321da0c5b6ec0d65097571563176/assets/images/background/page-title-5.jpg)
    no-repeat;

  background-size: 100% 100%;

  .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    h1,
    p {
      color: #f0f2f2;
    }
  }
}

.myrow {
  position: relative;
  padding: 5%;
}

.info-column {
  z-index: 3;
  margin-top: 0.625rem;
}

.single-info-box .inner-box {
  position: relative;
  display: block;
  background: #ffffff;
  padding: 50px 30px 47px 120px;
  border-radius: 10px;
  height: 12.5rem;
  box-shadow: 4px 0px 17px;
}

.single-info-box .inner-box .icon-box {
  position: absolute;
  left: 30px;
  top: 50px;
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: #f0f2f2;
  text-align: center;
  border-radius: 50%;
  font-size: 30px;
  transition: all 500ms ease;
}

.single-info-box .inner-box h3 {
  display: block;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  margin-bottom: 9px;
}

.single-info-box .inner-box p {
  font-size: 16px;
  line-height: 26px;
  color: #808080;
}

.single-info-box .inner-box .icon-box {
  position: absolute;
  left: 30px;
  top: 50px;
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: #f0f2f2;
  text-align: center;
  border-radius: 50%;
  font-size: 30px;
  transition: all 500ms ease;
}

.single-info-box .inner-box .icon-box {
  color: #ff7c5b;
}

.single-info-box .inner-box:hover .icon-box {
  background: #ff7c5b;
}

.single-info-box .inner-box:hover .icon-box {
  color: #ffffff;
}

.anim-icon {
  z-index: 2;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  max-width: 1920px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.anim-icon .anim-icon-2 {
  right: 98px;
  bottom: 29px;
  width: 102px;
  height: 96px;
}

.anim-icon .anim-icon-1 {
  left: 100px;
  top: 28px;
  width: 102px;
  height: 96px;
}

.anim-icon .icon {
  position: absolute;
  background-repeat: no-repeat;
}

.message {
  padding-top: 1.875rem;
}

.log {
  img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
  }
}

.messageListCard,
.message {
  transition: all 0.5s;
}
.messageListCard:hover,
.message:hover {
  box-shadow: 0 8px 10px rgba(62, 147, 241, 0.37) !important;
}

.log1 {
  background-size: cover;
}
.log3 {
  background-size: cover;
  img {
    margin-top: 0 !important;
    height: 63px !important;
  }
}
.log1,
.log3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;

  img {
    width: 60px;
    height: 60px;
    margin-top: 6px;
  }
}
.card-title {
  max-height: 72px;
  overflow: hidden;
}
</style>
